<script setup>
import { useCourseStore } from '@/stores/courses'
import AppNavigation from '@/components/AppNavigation.vue'

const courseStore = useCourseStore()
</script>

<template>
  <div class="home">
    <van-nav-bar
      title="大白话编程"
      fixed
    />
    
    <div class="content">
      <h2 class="section-title">热门课程</h2>
      
      <div class="course-list">
        <van-card
          v-for="course in courseStore.courses"
          :key="course.id"
          :title="course.title"
          :desc="course.description"
          :thumb="course.image"
          @click="$router.push(`/course/${course.id}`)"
        >
          <template #footer>
            <van-button size="small" type="primary" @click.stop="$router.push(`/course/${course.id}`)">
              查看详情
            </van-button>
          </template>
        </van-card>
      </div>
    </div>
    
    <AppNavigation />
  </div>
</template>

<style scoped>
.home {
  padding-top: 46px;
  padding-bottom: 50px;
}

.content {
  padding: 16px;
}

.section-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  color: #323233;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.van-card {
  background-color: #fff;
  cursor: pointer;
}
</style> 